<template>
  <div class="login">
    <div class="header">
      <van-nav-bar
        title="登录"
        right-text="注册"
        left-arrow
        @click-left="back"
        @click-right="goRegister"
      >
      </van-nav-bar>
    </div>
    <div class="bg">
      <div class="logo">
        <img class="auto-img" src="../assets/home-active.png" alt="" />
      </div>
      <p class="mao-yan">猫眼电影</p>
    </div>
    <div class="login-form">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          class="account"
          autocomplete="off"
        />
        <van-field
          v-model="password"
          :type="!isOpenPwd ? 'password' : 'text'"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="pwd"
          autocomplete="off"
          :right-icon="!isOpenPwd ? 'closed-eye' : 'eye-o'"
          @click="togglePwd"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="login"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import cryptoJs from "crypto-js";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
      // 查看登录密码
      isOpenPwd: false,
      cookie: "",
    };
  },
  created() {
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onSubmit(values) {
      
    },
    goRegister() {
      this.$router.push({ name: "Register" });
    },
    // 切换密码可见状态
    togglePwd() {
      this.isOpenPwd = !this.isOpenPwd;
    },

    // 登录
    login() {
      // 获取cookie数据
      let cookieDate = document.cookie;
      // 

      // 将cookie字符串转换为方便操作的对象
      //按照; 切割
      let cookies = cookieDate.split("; ");
      //  //得到一个数组

      // 设置一个空对象来保存获取到的数据
      let cookieObject = {};

      for (let i = 0; i < cookies.length; i++) {
        // cookies[i]取出文本
        let c = cookies[i].split("="); // = 分割，取出=后的值
        //  //一个数组

        cookieObject[c[0]] = c[1];
      }
      // 

      // 获取账户
      let account = cookieObject.account;
      
      // 获取密码
      let pwd = cookieObject.password;
      // 

      // 密码解密
      var bytes = cryptoJs.AES.decrypt(pwd, "password");
      var originalText = bytes.toString(cryptoJs.enc.Utf8);
      

      if(this.username !== account || this.password !== originalText){
        alert('账号或密码错误！');
        return;
      }else{
        alert('登录成功');

        localStorage.setItem('_token',originalText);
        this.$router.push({name:'My'});
      }

    },

  },
};
</script>

<style lang="less" scoped>
.login {
  position: relative;
  // height: 650px;
  // height: 100%;
  // background-color: #f5f5f5;
}
.header {
  background-color: #fb5268;
  width: 100%;
  height: 46px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  /deep/.van-nav-bar__content {
    // border: 1px solid red;
    background-color: #fb5268;
  }
  /deep/ .van-hairline--bottom::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: none;
  }
  /deep/ .van-nav-bar__arrow {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
    font-size: 19px;
  }
  /deep/ .van-nav-bar__text {
    color: #fff;
    font-size: 16px;
  }
}
.bg {
  // border: 1px solid #000;
  background-color: #fb5268;
  height: 300px;
  margin-top: 46px;
  position: relative;
  .logo {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 14px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -45px;
    display: flex;
    align-items: center;
    justify-content: center;
    .auto-img {
      width: 66px;
    }
  }
  .mao-yan {
    position: absolute;
    top: 136px;
    left: 50%;
    margin-left: -29px;
    color: #fff;
    font-size: 15px;
  }
}
.login-form {
  background-color: #fff;
  // border: 1px solid #000;
  width: 86%;
  height: 240px;
  margin-top: -80px;
  position: absolute;
  left: 50%;
  margin-left: -161px;
  border-radius: 10px;
  box-shadow: 0 0 2px 2px #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  .van-form {
    // border: 1px solid #000;
    width: 80%;
    border-radius: 10px;
    margin-top: 10px;
    .van-cell {
      // border: 1px solid #000;
      border-bottom: 1px solid #aaa;
      margin-bottom: 26px;
      &:last-child {
        margin-bottom: 0;
      }
      /deep/.van-field__control {
        font-size: 16px;
      }
    }
    .van-button {
      background-color: #fb5268;
      position: absolute;
      bottom: -20px;
      width: 70%;
      border: none;
      font-size: 18px;
      letter-spacing: 4px;
    }
    /deep/ .van-field__body {
      // border: 1px solid #000;
      margin-left: 38px;
      padding-top: 2px;
    }
    /deep/ .van-field__error-message {
      margin-left: 38px;
    }
  }
  .account {
    background-image: url("../assets/account.png");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 20px 8px;
  }
  .pwd {
    background-image: url("../assets/pwd.png");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 20px 12px;
  }
  .eye {
    // border: 1px solid #000;
    position: absolute;
    right: 45px;
    bottom: 76px;
  }
}
</style>